<template>
  <!-- <PersionSelector
        sourceType="T"
        :defaultUserIndexList="defaultUserIndexList"
    ></PersionSelector> -->
  <div>
    <!-- <IndexList :default-user-index-list="checkedList" :list="userList"
                    @change="onChangeIndexList"  /> -->
    <view style="display: flex;justify-content: space-between;margin: 30rpx">
      <view>学生
      </view>
      <view>排名</view>
    </view>
    <view style="margin-bottom: 80rpx">
    <view class="content" v-for="(item, index) in userList" :key="index" @click="clickCircle(item, index)">
      <view class="margin-right-30">
        <img v-if="!item.type" src="../../static/img/noselect.png" alt="" style="width: 36rpx; height: 36rpx" />
        <img v-else src="../../static/img/select.png" alt="" style="width: 36rpx; height: 36rpx" />
      </view>
        <view class="middle">
          <view class="img-box" style="width: 64rpx; height: 64rpx;border-radius: 50%; background-color: rgba(200, 200, 200, 0.2);margin-right: 15rpx;">
            <Avatar sex="girl" url="" :size="64" />
          </view>
        </view>
      <view class="conetnt-center">
        <view class="center-t">{{
            item.userName
          }}</view>
      </view>
        <view class="center-t" style="margin-left: auto">{{
            item.classRank
          }}</view>

    </view></view>
    <view v-if="userList.length < 1" class="notYet">
      <img :src="baseUrl+'/static/uniApp/static/image/teacherOnDuty/emptyData.png'" mode="" />
      <view class="infoText">暂无数据~~</view>
    </view>
    <view v-if="userList.length > 0" class="footer box-show9 font-PF-M flex flex-align-center">
      <view @click="handleSelect" class="flex flex-align-center margin-right-40">
        <img v-if="!selectAll" src="../../static/img/noselect.png" alt="" style="width: 36rpx; height: 36rpx" />
        <img v-else src="../../static/img/select.png" alt="" style="width: 36rpx; height: 36rpx" />
        <text class="margin-left-8">全选</text>
      </view>
      <view class="footer-btn" @click="onChangeIndexList"> 确认 </view>
    </view>
  </div>
</template>

<script>
import Avatar from "@/components/jyAvatar.vue"
import { examStudentList } from "@/pages/achievement/api/teacher.js"
// import IndexList from "@/components/persionSelector/indexList.vue"
export default {
  name: "addStudent",
  components: {
    Avatar,
    // IndexList
  },
  data() {
    return {
      selectAll: false,
      defaultUserIndexList: [],
      userList: [],
      checkedList: [],
    }
  },
  computed: {
    baseUrl() {
      return this.$baseUrl
    },
  },
  onLoad(options) {
    console.log("options", options)
    this.examStudentListFn(
      options.examId,
      options.classId,
      options.classCourseId
    )
  },
  methods: {
    handleSelect() {
        this.selectAll = !this.selectAll
        if(!this.selectAll){
            this.userList = this.userList.map((v) => ({
              ...v,
              type: true,
            }))
        }else{
            this.userList = this.userList.map((v) => ({
              ...v,
              type: false,
            }))
        }
    },
    clickCircle(item,index) {
        console.log('item,index',item,index);
        this.userList = this.userList.map((v, i) => ({
          ...v,
          type: i == index ? !v.type : v.type,
        }))
    },
    onChangeIndexList(e) {
        const newArr = this.userList.filter((item) => item.type).map((item) => item.userIndex)
        console.log('newArr',newArr);
        uni.setStorageSync('userListAchi', JSON.stringify(newArr))
        uni.navigateBack()
    },
    async examStudentListFn(examId, classId, classCourseId) {
      const params = {
        examId,
        classId,
        classCourseId,
      }
      try {
        const data = await examStudentList(params)
        if (data.success) {
          if (data.data.list.length) {
            this.userList = data.data.list.map((item) => {
              return {
                ...item,
                type: false,
              }
            })
          } else {
            uni.showToast({
              title: "未查询到学生数据,请前往添加学生",
              icon: "none",
              duration: 2000,
            })
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../../../../static/styles/index.less";
.content {
  height: 150rpx;
  display: flex;
  align-items: center;
  border-bottom: solid 1rpx #c7c5c5;

  padding: 24rpx 30rpx;
  position: relative;
  box-sizing: border-box;
  .contentLeft {
    width: 40%;
    //   border-right: 1px solid #edeeef;
  }

  .contentRight {
    padding: 10rpx;
    width: 60%;
    display: flex;
    justify-content: space-between;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  z-index: 2;
  height: 150rpx;
  width: 100%;
  background-color: #fff;
  padding: 0 30rpx;
  .footer-btn {
    width: 538rpx;
    height: 72rpx;
    background: #4275fd;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    opacity: 1;
    border: 2rpx solid #4275fd;
    font-size: 30rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 72rpx;
  }
}
.conetnt-center {
}
.notYet {
    width: 100%;
    padding-top: 50px;
    background: white;
    height: calc(100vh - 90px);
    text-align: center;
    img {
      width: 360upx;
      height: 300upx;
    }
    .infoText {
      color: #999999;
      font-size: 26upx;
    }
  }
</style>
